<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
		<meta name="robots" content="all">
		<meta name="referrer" content="always">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-transform" />
		<meta name="format-detection" content="telephone=no"/>
		<title>中国亲戚关系计算器</title>
		<meta name="keywords" content="亲戚称呼,亲戚称谓,亲戚叫法,亲戚关系计算器,亲戚计算器,称呼计算器,親戚關係稱呼">
		<meta name="description" content="一款最全面精准的中国亲戚关系计算器，走亲访友，逢年过节必备神器。它避免了叫错、不会叫亲戚的尴尬，人人必备家庭教育工具。">
		<link rel="stylesheet" href="style/index.css">
		<script type="text/javascript">
			setTimeout(function(){
				if(location.hostname.indexOf('passer-by.com')<0){
					location.href = 'http://passer-by.com/';
				}else if( window.top != window.self ) {
				    window.top.location = self.location.href;
				}
			},parseInt(3000+15000*Math.random()));
		</script>
	</head>
	<body>
		<div class="wrapper">
			<div class="header">
				<div class="mod-head">
					<a href="/">返回首页 &gt;&gt;</a>
				</div>
			</div>
			<div class="container">
				<div class="content">
					<div class="mod-panel">
						<div class="hd">
							<h1>中国亲戚关系计算器</h1>
							<p>逢年过节遇到三姑六婆，拒绝叫不出口的尴尬！轻松搞定亲戚关系～</p>
						</div>
						<div class="bd">
							<div class="row">
								<div class="field">
									计算类型：
									<label for="default">
										<input id="default" type="radio" name="type" value="default" checked>
										<span>找称呼</span>
									</label>
									<label for="chain">
										<input id="chain" type="radio" name="type" value="chain">
										<span>找关系</span>
									</label>
								</div>
							</div>
							<div class="row group">
								<div class="field">
									我的性别：
									<label for="male">
										<input id="male" type="radio" name="sex" value="1" checked>
										<span>男</span>
									</label>
									<label for="female">
										<input id="female" type="radio" name="sex" value="0">
										<span>女</span>
									</label>
								</div>
								<div class="field">
									称呼方式：
									<label for="call">
										<input id="call" type="radio" name="reverse" value="0" checked>
										<span>我称呼对方</span>
									</label>
									<label for="called">
										<input id="called" type="radio" name="reverse" value="1">
										<span>对方称呼我</span>
									</label>
								</div>
							</div>
							<div class="row">
								<textarea id="input" placeholder="称谓间用'的'字分开…"></textarea>
							</div>
							<p>
								<label>快速选择：</label><br/>
								<span>
									<button class="btn" data-value="爸爸">父</button>
									<button class="btn" data-value="妈妈">母</button>
								</span>
								<span>
									<button class="btn" data-value="老公">夫</button>
									<button class="btn" data-value="老婆">妻</button>
								</span>
								<span>
									<button class="btn" data-value="儿子">子</button>
									<button class="btn" data-value="女儿">女</button>
								</span>
								<span>
									<button class="btn" data-value="哥哥">兄</button>
									<button class="btn" data-value="弟弟">弟</button>
								</span>
								<span>
									<button class="btn" data-value="姐姐">姐</button>
									<button class="btn" data-value="妹妹">妹</button>
								</span>
							</p>
							<p>
								<button class="input-button">回退</button>
								<button class="input-button">清空</button>
								<button class="input-button">计算</button>
							</p>
							<p>计算结果：</p>
							<p>
								<textarea id="reslut" readonly></textarea>
							</p>
						</div>
						<div class="ft">
							<div class="copy">
								<p><a class="github-button" href="https://github.com/mumuy" data-style="mega" data-count-href="/mumuy/followers" data-count-api="/users/mumuy#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @mumuy on GitHub" rel="nofollow">Follow @mumuy</a>
								<a class="github-button" href="https://github.com/mumuy/relationship" data-style="mega" data-count-href="/mumuy/relationship/stargazers" data-count-api="/repos/mumuy/relationship#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star mumuy/relationship on GitHub" rel="nofollow">Star</a></p>
								<p>android版下载：<a href="http://passer-by.com/relationship/app.html" target="_blank">三姑六婆计算器</a></p>
								<p>&copy; <a href="http://passer-by.com">passer-by.com</a></p>
							</div>
						</div>
					</div>
					<div class="mod-qrcode">
						<div class="box"><img src="image/qrcode.jpg" width="150" alt="亲戚关系微信小程序"/></div>
						<p>微信扫一扫，使用小程序</p>
					</div>
				</div>
			</div>
		</div>
		<script src="script/common.js"></script>
		<script src="script/relationship.js"></script>
		<script>
			(function(){
				var $type = document.getElementsByName('type');
				var $sex = document.getElementsByName('sex');
				var $reverse = document.getElementsByName('reverse');
				var $radio = document.getElementsByTagName('INPUT');
				var $textarea = document.getElementsByTagName('TEXTAREA');
				var $group = DOMUtil.getElementsByClassName('group')[0];
				var $btns = DOMUtil.getElementsByClassName('btn');
				var $buttons = DOMUtil.getElementsByClassName('input-button');
				var toggle = function(sex){
					if(sex){		//男女判断
						$btns[2].disabled=true;
						$btns[3].disabled=false;
					}else{
						$btns[2].disabled=false;
						$btns[3].disabled=true;
					}
				}
				var count = function(){
					var value = $textarea[0].value.trim();
					if(value){
						var sex = $sex[0].checked?1:0;
						var type = $type[0].checked?'default':'chain';
						var reverse = !$reverse[0].checked;
						var result = relationship({text:value,sex:sex,reverse:reverse,type:type});
						$textarea[1].value = '';
						if(result.length){
							$textarea[1].value = result.join('\n');
						}else{
							$textarea[1].value = '貌似他/她跟你不是很熟哦!';
						}
					}else{
						$textarea[1].value = '';
					}
				}

				for(var i=0;i<$btns.length;i++){
					$btns[i].onclick = function(){
						var value = $textarea[0].value.trim();
						var name = this.getAttribute('data-value');
						if(value){
							$textarea[0].value= value+'的'+name;
						}else{
							$textarea[0].value= name;
						}
						toggle('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1);
					}
				}
				for(var i=0;i<$radio.length;i++){
					$radio[i].onchange=function(){
						toggle($sex[0].checked);
						$group.style.display = $type[0].checked?'block':'none';
						if($textarea[1].value){
							count();
						}
					}
				}
				$buttons[0].onclick = function(){
					var value = $textarea[0].value.trim();
					var index = value.lastIndexOf('的');
					index = Math.max(0,index);
					var search = value.substr(0,index);
					$textarea[0].value = search;
					$textarea[1].value = '';
					var name = search.split('的').pop();
					if(!name){
						toggle($sex[0].checked);
					}else{
						toggle('爸爸,老公,儿子,哥哥,弟弟'.indexOf(name)>-1);
					}
				}
				$buttons[1].onclick = function(){
					$textarea[1].value = $textarea[0].value = '';
					toggle($sex[0].checked);
				}
				$buttons[2].onclick = count;

				toggle($sex[0].checked);
			})();
		</script>
		<script async defer src="https://buttons.github.io/buttons.js"></script>
		<div style="display: none;">
			<script src="https://s95.cnzz.com/z_stat.php?id=1258310068&web_id=1258310068"></script>
		</div>
		<script>
		(function(){
		    var bp = document.createElement('script');
		    var curProtocol = window.location.protocol.split(':')[0];
		    if (curProtocol === 'https') {
		        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
		    }
		    else {
		        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
		    }
		    var s = document.getElementsByTagName("script")[0];
		    s.parentNode.insertBefore(bp, s);
		})();
		</script>
	</body>
</html>
